<template>
  <view class="snDetail">
    <view class="sn-container">
      <view class="sn-container-item">
        <view class="item-left">
          <text>手机号</text>
        </view>
        <view class="item-right">
          <text>{{store.memberInfo.phone}}</text>
        </view>
      </view>
      <view class="sn-container-item" style="margin-bottom: 0;">
        <view class="item-left">
          <text>SN码</text>
        </view>
        <view class="item-right" @click="scanningCode">
          <image src="https://cdn3.axureshop.com/demo/2027306/images/%E7%BB%91%E5%AE%9Asn%E7%A0%81/u12322.png" mode="aspectFit"></image>
        </view>
      </view>
      <view class="help" style=" text-align:right;margin: 5rpx 30rpx;">
        <text style="color: #09f;font-size: 12px;" @click="help">快捷扫码帮助</text>
      </view>
      <view class="sn-container-item" style="margin-top: 0;">
        <view class="item-left" style="display: flex;align-items: center;">
          <text @click="info">代理商M码(<text style="color: #09f;">选填</text>)</text><icon type="info" size="20"></icon>
        </view>
        <view class="item-right" @click="scanningCode">
          <image src="https://cdn3.axureshop.com/demo/2027306/images/%E7%BB%91%E5%AE%9Asn%E7%A0%81/u12322.png" mode="aspectFit"></image>
        </view>
      </view>
      <view class="tips" style=" text-align:right;margin: 0 30rpx;">
        <text style="color: #666;font-size: 12px;">输入M码可获得优惠券</text>
      </view>
    </view>
    <view class="sn-btn">
      <button style="font-size: 13px;color: #333;" @click='submitBinding'>提交绑定</button>
    </view>
  </view>
</template>

<script setup>
  import {useMemberInfoStore} from '@/store/pinia/memberInfo'
  import {onReady} from '@dcloudio/uni-app'
  onReady(()=>{
    // console.log('onReady');
    uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#ff0000',
        animation: {
            duration: 400,
            timingFunc: 'easeIn'
        }
    })
  })
  const store = useMemberInfoStore()
  const info = ()=>{
    uni.showModal({
    	title: '什么是M码',
    	content: `什么是M码呢?这个问题就是关于什么是M码,
                那么我们就应该了解这个M码是什么,那这个
                到底是什么呢？其实我也不知道!`,
      showCancel:false,
      // confirmColor:'#fff',
      confirmText:'我知道了',
    });
  }
  const help = ()=>{
    uni.showModal({
    	title: '扫码帮助',
    	content: `1，打开要绑定的平板上的小黑早教或小黑绘本或萌萌视频的任一app
                2，打开”会员中心-维修卡“
                3，扫描页面上的SN码自动输入`,
      showCancel:false,
      // confirmColor:'#fff',
      confirmText:'我知道了',
    	success: function (res) {
    		// console.log(res);
    	}
    });
  }
  const scanningCode = ()=>{
    uni.$showMsg('扫码')
    uni.scanCode({
      barCodeInput:true,
    	success: function (res) {
    		console.log('条码类型：' + res.scanType);
    		console.log('条码内容：' + res.result);
    	}
    });
  }
  const addSn = ()=>{
    const obj = {
        id:'003',
        equipmentId:'XM999999999',
        caeatTime:formatDate()
      }
    store.addSnMa(obj)
    uni.showLoading({
      title:'提交中'
    });
    setTimeout(()=>{
      uni.hideLoading();
      uni.$showMsg('提交绑定成功!')
      setTimeout(()=>{
         uni.navigateBack()
      },500)
    },1000)
  }
  const submitBinding = ()=>{
  uni.showModal({
  	title: '提示',
  	content: '一个手机号最多绑定3个SN码，一旦绑定不可解绑,你确定要绑定SN码吗？',
  	success: function (res) {
  		if (res.confirm) {
  			addSn()
  		} 
  	}
  });
  }
 function formatDate() {
   const date = new Date();
   const year = addZero(date.getFullYear());
   const month = addZero(date.getMonth() + 1);
   const day = addZero(date.getDate());
   const hours = addZero(date.getHours());
   const min = addZero(date.getMinutes());
   const sec = addZero(date.getSeconds());
   return `${year}-${month}-${day} ${hours}:${min}:${sec}`;
 }
 function addZero(time) {
   return Number(time) <= 9 ? "0" + time : time;
 }
</script>

<style lang="scss" scoped>
.snDetail{
  height: 100%;
  background-color: #eee;
  .sn-container{
    font-size: 14px;
    color: #999;
    .sn-container-item{
      background-color: #fff;
      border-top: 1px solid gray;
      border-bottom: 1px solid gray;
      display: flex;
      justify-content: space-between;
      padding: 20rpx 60rpx;
      align-items: center;
      margin: 30rpx 0;
      .item-right{
        image{
          width: 66rpx;
          height: 66rpx;
        }
      }
    }
  }
  .sn-btn{
    margin-top: 50rpx;
    text-align: center;
    button{
      background-color: #fff;
      border: 1px solid gray;
      width: 85%;
    }
  }
}
</style>
